"use client"

import { useAnimate, useInView, stagger } from "motion/react";
import { useEffect } from "react";

interface AnimatedHeaderProps {
    content: string[];
}

export function AnimatedHeader({ content }: AnimatedHeaderProps) {

    const [ scope, animate ] = useAnimate();
    const isInView = useInView(scope);

    useEffect(() => {

        if (isInView) {
            const controls = animate("li",
                {
                    y: [ -60, 0 ],
                    filter: [ "blur(6px)", "blur(2px)", "blur(0px)" ]
                },
                {
                    delay: stagger(0.05)
                },
            );
            return () => controls.stop();
        }

    }, [ isInView ]);

    return (
        <ul className="flex gap-x-5 justify-center items-center my-12 py-12"
            ref={ scope }>
            {
                content.map((line, idx) => (
                    <li key={ idx }>
                        <span className="text-4xl md:text-6xl lg:text-8xl duration-300 text-shadow-lg">
                            { line }
                        </span>
                    </li>)
                )
            }
        </ul>
    )
}